<template>
  <!-- 富文本 -->
  <div class="editor_box" style="border: 1px solid #ccc;width:100%;">
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <Editor
        style="height: 500px;"
        v-model="html"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
        @input="handleInput"
    />
</div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {uploadAvatar} from "@/api/system/user.js"
export default {
  name: "WangEditor",
  components: { Editor, Toolbar },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {
        toolbarKeys: [
          'bold',
          'underline',
          'italic',
          'through',
          'clearStyle',
          'color',
          'bgColor',
          'fontSize',
          '|',
          'indent',
          'delIndent',
          'justifyLeft',
          'justifyRight',
          'justifyCenter',
          'justifyJustify',
          '|',
          'divider',
          'lineHeight',
          'bulletedList',
          'numberedList',
          '|',
          'insertLink',
          'emotion',
          'uploadImage',
          'insertTable',
          '|',
          'undo',
          'redo',
          'fullScreen'
          // "uploadVideo"
        ]
      },
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage: {
            // 自定义图片上传
            async customUpload(file, insertFn) {
              let formData = new FormData();
              formData.append("file", file);
              uploadAvatar(formData).then(response => {
                if (response.code == 200) {
                  // 将图片插入到文本框中
                  insertFn(response.data.filePath)
                }
              })
            }
          }
          // uploadVideo: {
          //   // 自定义图片上传
          //   async customUpload(file, insertFn) {
          //     uploadFile('', file).then(response => {
          //       const url = response.data
          //       insertFn(this.$getFilePath(url))
          //     })
          //   }
          // }
        }
      },
      mode: 'default', // or 'simple'
      uploadImgUrl:''
    };
  },
  watch: {
    value:{
      handler(val) {
        if (val !== this.html) {
          this.html = val||'';
        }
      },
      immediate:true
    }
  },
  created() {
    this.uploadImgUrl = process.env.VUE_APP_BASE_API + "/upload/image";
    // this.editorConfig.MENU_CONF['uploadImage'] = {
    //     server:this.uploadImgUrl,
    // }
  },
  // mounted() {
  //     this.html = this.value
  // },
  beforeDestroy() {
      const editor = this.editor
      if (editor == null) return
      editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
        this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    handleInput(value) {
      // 将文本内容传给父组件（引用这个组件的vue文件的）
      this.$emit('input', value)
    }
   
  }
};
</script>
<style scoped lang="css">
.editor_box >>> .w-e-text-container{
  height: 100%;
}
</style>
